import type {FC} from "react";
import { Form, Input, Button, Select, App } from "antd";
import { useApiRequest } from "../../hook/useApiRequest.ts";
import type { FormItemConfigs } from "../../global.ts";
import FormItems from "../FormItems/index.tsx";

export interface LoginProps {
  loginSuccessCallback?: (loginResult: any) => void;
  loginTitle?: string;
  loginApiUrl?: string;
  loginFormConfig?: FormItemConfigs[];
  loginBoxHeight?: string;
  successTip?: string;
  buttonText?: string;
}

const LoginForm: FC<LoginProps> = ({
  loginSuccessCallback,
  loginTitle,
  loginApiUrl,
  loginFormConfig,
  loginBoxHeight,
  successTip = "登录成功",
  buttonText,
}) => {
  const [form] = Form.useForm();
  const { message } = App.useApp();
  const { request } = useApiRequest();

  const onFinish = (values: any) => {
    console.log("点击登录", values);

    if (loginApiUrl) {
      // 发起网络请求
      request({
        url: loginApiUrl,
        method: "POST",
        data: values,
        success: (res: any) => {
          if (res?.code === 200 || res?.success) {
            loginSuccessCallback?.(res?.data); // 假设 res.data 包含登录成功的结果
          } else {
            // ... 登录失败逻辑
            message.error(res?.message || res?.error || "登录失败");
          }
        },
        fail: (err: any) => {
          // ... 请求失败逻辑
          message.error(err?.message || err?.error || "登录失败");
        },
      });
    }
  };

  return (
    <div 
    // className="w-[300px]"
    style={{
      width: "300px",
    }}
    >
      <span
        style={{
          display: "block",
          fontSize: "24px",
          fontWeight: "bold",
          marginBottom: "20px",
        }}
      >
        {/* 站点标题 */}
        {loginTitle ?? "欢迎登录"}
      </span>
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        style={{ height: loginBoxHeight || "100%" }}
      >
        {/* {loginFormConfig?.map((item) => {
          if (item.type === "input") {
            return (
              <Form.Item
                key={item.name}
                name={item.name}
                label={item.label}
                rules={item.rules || []}
                initialValue={item.initialValue}
              >
                <Input />
              </Form.Item>
            );
          } else if (item.type === "password") {
            return (
              <Form.Item
                key={item.name}
                name={item.name}
                label={item.label}
                rules={item.rules || []}
                initialValue={item.initialValue}
              >
                <Input.Password />
              </Form.Item>
            );
          } else if (item.type === "select") {
            return (
              <Form.Item
                key={item.name}
                name={item.name}
                label={item.label}
                rules={item.rules || []}
                initialValue={item.initialValue}
              >
                <Select options={item.options || []} />
              </Form.Item>
            );
          } else if (item.type === "hidden") {
            return (
              <Form.Item
                key={item.name}
                name={item.name}
                hidden
                initialValue={item.initialValue}
              >
                <Input />
              </Form.Item>
            );
          }
        })} */}
        <FormItems formItemsConfigs={loginFormConfig} />
        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            style={{ width: "300px", height: "40px" }}
          >
            {buttonText || "登录"}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default LoginForm;
